import { ArrowsAltOutlined, ShrinkOutlined } from "@ant-design/icons";
import { Empty, Menu, MenuProps, Tooltip } from "antd";
import { forwardRef, useRef, useState } from "react";
import { AnimatePresence, easeInOut, motion } from "framer-motion";
import "./index.scss";
import PropTypes from "prop-types";

const EffectContainer = forwardRef((props: any, ref: any) => {
  const [showCode, setShowCode] = useState(props.isShowCode);
  const [current, setCurrent] = useState("TypeScript");
  const innerRef: any = useRef();
  type MenuItem = Required<MenuProps>["items"][number];
  const items: MenuItem[] = [
    {
      label: "TypeScript",
      key: "TypeScript",
    },
    {
      label: "Scss",
      key: "Scss",
    },
  ];
  const onClick: MenuProps["onClick"] = (e) => {
    setCurrent(e.key);
  };

  const handlerShow = (flag: boolean) => {
    setShowCode(flag);
    innerRef.current.style.height = flag ? "99.9%" : "99%";
  };

  return (
    <div className="effect-container" ref={ref}>
      <div className="show">{props.effect}</div>
      <div
        className="tool"
        style={{
          borderBottom: showCode ? "1px dashed #fff" : "none",
        }}
      >
        {showCode ? (
          <Tooltip placement="right" title="收起代码">
            <ShrinkOutlined
              className="big"
              onClick={() => handlerShow(false)}
            />
          </Tooltip>
        ) : (
          <Tooltip placement="right" title="打开代码">
            <ArrowsAltOutlined
              className="big"
              onClick={() => handlerShow(true)}
            />
          </Tooltip>
        )}
      </div>
      <AnimatePresence>
        {showCode && (
          <motion.div
            initial={{ opacity: 0, y: -100 }}
            animate={{
              opacity: 1,
              y: 0,
              transition: { duration: 0.5, ease: easeInOut },
            }}
            exit={{
              y: -100,
              opacity: 0,
              transition: { duration: 0.5, ease: easeInOut },
            }}
          >
            <Menu
              className="menu-box"
              onClick={onClick}
              selectedKeys={[current]}
              mode="horizontal"
              items={items}
            />
            {current == "TypeScript" ? (
              <div className="code">
                {props.code ? (
                  props.code
                ) : (
                  <Empty description="作者很懒,什么都没有留下~~~🙃" />
                )}
              </div>
            ) : (
              <div className="code">
                {props.css ? (
                  props.css
                ) : (
                  <Empty description="作者很懒,什么都没有留下~~~🙃" />
                )}
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>

      {/*<div className="moving-element"></div>*/}
      <div className="inner" ref={innerRef}></div>
    </div>
  );
});

EffectContainer.defaultProps = {
  isShowCode: false,
};

EffectContainer.propTypes = {
  effect: PropTypes.element,
  code: PropTypes.element,
  css: PropTypes.element,
  isShowCode: PropTypes.bool,
};

export default EffectContainer;
